<template>
  <div class="container">
    <div class="back">
      <div class="wrap" @click="goBack">
        <van-icon name="arrow-left"/>
      </div>
    </div>
    <div class="info">
      <div class="mainInfo">
        <div class="pic">
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in initData.productImages" :key="index">
              <img :src="image.imageUrl">
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="title">{{initData.project_name}}</div>
        <div class="subtitle">{{initData.introduction}}</div>
      </div>
      <div class="infoDetail">
        <!-- <div class="address">
          <div class="left">
            <img src="../../assets/images/adress.png" alt>
            <span>{{initData.address}}</span>
          </div>
          <div class="right">
            <span>查看地图</span>
            <van-icon name="arrow"/>
          </div>
        </div> -->
        <div class="time">上线时间{{initData.begin_date}}</div>
      </div>
    </div>
    <div class="content">
      <div class="item">
        <div class="row1">
          当前完成
          <span>{{Number(initData.have_money).toFixed(2)}}元</span>
        </div>
        <div class="row2">
          <div>
            目标额
            <span>{{initData.sum_money}}</span>元
          </div>
          <div>
            支持
            <span>{{initData.people}}</span>人
          </div>
          <div>{{initData.back_rule}}</div>
        </div>
      </div>
      <div class="item">
        <div class="row3">
          <div class="left">
            项目回报价
            <span>{{initData.unit_price}}元</span>
          </div>
          <div class="right">支持
            <van-icon name="arrow"/>
          </div>
        </div>
        <div class="row2">
          <div>起售数量：{{initData.minimum}}</div>
          <div>加售幅度：{{initData.add_mini}}</div>
          <div>结束时间{{initData.end_date}}</div>
        </div>
      </div>
      <div class="item">
        <div class="row4">
          <div class="left">发放商品时间</div>
          <div class="right">{{initData.back_date}}（发货）</div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="title">项目详情</div>
      <div class="detailInfo" v-html="initData.detail"></div>
    </div>
    <div class="footer">
      <div class="left">
        <div class="store">
          <img src="../../assets/images/store.png" alt>
          <span>店铺</span>
        </div>
        <div class="collect" @click="collectMethod">
         <img :src="collectUrl" alt>
          <span :class="{fontColor:isCollect}">收藏</span>
        </div>
      </div>
      <div class="buy" @click="showPop">立即抢购</div>
    </div>
    <van-popup v-model="show" position="bottom">
      <div class="popContent">
        <div class="productInfo">
          <div class="left">
            <img :src="initData.product_image_url" alt>
          </div>
          <div class="right">
            <div class="close" @click="closePop">
              <img src="../../assets/images/close.png" alt>
            </div>
            <div class="price">
              <div class="price1">回报价
                <span>
                  <font>￥</font>
                  {{initData.unit_price}}
                </span>
              </div>
              <div class="price2">{{initData.back_rule}}</div>
            </div>
          </div>
        </div>
        <div class="selectNum">
          <div class="left">选择数量</div>
          <div class="right">
            <img src="../../assets/images/reduce2.png" alt @click="reduceNum">
            <span>{{formData.goodsNum}}</span>
            <img src="../../assets/images/add2.png" alt @click="addNum">
          </div>
        </div>
        <div class="btn" @click="payMethod">确认</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "crowdfundingGoodsDetail",
  data() {
    return {
      show: false,
      formData: {
        goodsNum: 1
      },
      initData: {},
      crowd_Id: this.$route.query.crowd_Id || 1,
      collectIcon: [
        require("../../assets/images/collect5.png"),
        require("../../assets/images/collect2.png")
      ],
      collectUrl: require("../../assets/images/collect5.png"),
      isCollect: false,
      user_id:"",
    };
  },
  mounted() {
    this.user_id =
      this.$cookies.get("user_id") || localStorage.getItem("user_id") || 12345;
    this.getInitData();
  },
  methods: {
    goBack(){
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      let params = {
      };
      if (isAndroid) {
        console.warn("finish");
      } else if (isiOS) {
        window.webkit.messageHandlers.crowdBackToApp.postMessage(null);
      }
    },
    //加数字
    addNum() {
      this.formData.goodsNum++;
    },
    //减数字
    reduceNum() {
      if (this.formData.goodsNum > this.initData.minimum) {
        this.formData.goodsNum--;
      }
    },
    //显示支付弹窗
    showPop() {
      this.show = true;
    },
    closePop() {
      this.show = false;
    },
    //支付
    payMethod() {
      this.$router.push({
        path: "/confirmOrder",
        query: {
          data: JSON.stringify(this.initData),
          num: this.formData.goodsNum
        }
      });
    },
    //初始化页面
    async getInitData() {
      let params = {
        crowd_Id: this.crowd_Id
      };
      const res = await this.$axios.post(this.$api.crowd_goodsDetails, params);
      if (res.success) {
        this.initData = res.data;
        this.formData.goodsNum=this.initData.minimum;
        if (this.initData.begin_date) {
          this.initData.begin_date = this.initData.begin_date.split(" ")[0];
        }
        if (this.initData.end_date) {
          this.initData.end_date = this.initData.end_date.split(" ")[0];
        }
        if (this.initData.back_date) {
          this.initData.back_date = this.initData.back_date.split(" ")[0];
        }
        this.isLoading = false;
      } else {
        this.initData = {};
        this.$toast(res.msg);
      }
    },
     //收藏
    async collectMethod() {
      let params = {
        user_id: this.user_id,
        product_id: this.initData.product_id,
        language: "zh"
      };
      const res = await this.$axios.post(this.$api.collectProduct, params);
      if (res.success) {
        if (res.msg == "收藏成功") {
          this.collectUrl = this.collectIcon[1];
          this.isCollect = true;
        } else if (res.msg == "取消收藏成功") {
          this.collectUrl = this.collectIcon[0];
          this.isCollect = false;
        }
        this.$toast(res.msg);
      } else {
        this.$toast(res.msg);
      }
    },
  },
 
};
</script>
<style scoped>
.fontColor {
  color: #00be47 !important;
}
.container {
  padding-bottom: 0.8rem;
}
.back {
  width: 100%;
  height: 0.46rem;
  display: flex;
  align-items: center;
  padding-left: 0.15rem;
  position: fixed;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 0.18rem;
  z-index:100;
}
.back .wrap {
  width: 0.34rem;
  height: 0.34rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info .mainInfo {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 0.1rem;
}
.info .mainInfo .pic {
  width: 100%;
}
.info .mainInfo .pic img {
  width: 100%;
}
.info .mainInfo .title {
  font-size: 0.15rem;
  color: #000000;
  padding-left: 0.15rem;
  margin-top: 0.15rem;
}
.info .mainInfo .subtitle {
  font-size: 0.14rem;
  color: #808080;
  padding-left: 0.15rem;
  margin-top: 0.1rem;
}
.info .infoDetail {
  padding: 0 0.15rem;
  background: #fff;
}
.info .infoDetail .address {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 0.45rem;
  border-bottom: 1px solid #eeeeee;
  font-size: 0.14rem;
}
.info .infoDetail .address .left {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
}
.info .infoDetail .address .left img {
  width: 0.13rem;
}
.info .infoDetail .address .left span {
  padding-left: 0.1rem;
}
.info .infoDetail .address .right {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #808080;
  min-width: 75px;
}
.info .infoDetail .address .right span {
  padding-right: 0.05rem;
}
.info .infoDetail .time {
  width: 100%;
  height: 0.35rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #333333;
  font-size: 0.12rem;
}
.content {
  width: 100%;
  margin-top: 0.05rem;
  background: #fff;
}
.content .item {
  padding: 0.15rem;
  border-bottom: 1px solid #eeeeee;
}
.row1 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.14rem;
  color: #01be47;
}
.row1 span {
  font-size: 0.21rem;
}
.row2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.15rem;
  font-size: 0.12rem;
  color: #333333;
}
.row2 span {
  color: #01be47;
}
.row3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.row3 .left {
  font-size: 0.14rem;
  color: #333333;
}
.row3 .left span {
  color: #01be47;
}
.row3 .right {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.15rem;
  color: #01be47;
}
.row4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
}
.row4 .left {
  font-size: 0.14rem;
}
.row4 .right {
  font-size: 0.12rem;
}
.detail {
  margin-top: 0.05rem;
  padding: 0.15rem;
  background: #fff;
}
.detail .title {
  font-size: 0.15rem;
  color: #333333;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 0.1rem;
}
.detail .detailInfo {
  font-size: 0.14rem;
  color: #333333;
  padding-top: 0.1rem;
}
.footer {
  width: 100%;
  height: 0.6rem;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
}
.footer .buy {
  width: 50%;
  height: 100%;
  background: #01be47;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer img {
  width: 0.18rem;
}
.footer .left {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 50%;
}
.footer .left > div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  color: #656565;
  font-size: 0.12rem;
}
.footer .left > div span {
  margin-top: 0.05rem;
}
.popContent {
  height: 2.5rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  padding: 0.15rem;
  background: #fff;
}
.popContent .productInfo {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  min-height: 1.05rem;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 0.25rem;
}
.popContent .productInfo .left {
  width: 1.05rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.1rem;
  min-height: 1.05rem;
}
.popContent .productInfo .left img {
  width: 100%;
}
.popContent .productInfo .right {
  padding-left: 0.25rem;
}
.popContent .productInfo .right {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 1.05rem;
}
.popContent .productInfo .close {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
}
.popContent .productInfo .right .price1 {
  font-size: 0.12rem;
  color: #000;
  margin-bottom: 0.15rem;
}
.popContent .productInfo .right .price1 span {
  font-size: 0.27rem;
  color: #00bf47;
  padding-left: 0.15rem;
}
.popContent .productInfo .right .price1 span font {
  font-size: 0.18rem;
}
.popContent .productInfo .right .price2 {
  font-size: 0.14rem;
  color: #00bf47;
}
.popContent .productInfo .close img {
  width: 0.28rem;
}
.popContent .selectNum {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.15rem 0;
  font-size: 0.14rem;
}
.popContent .selectNum .right {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  align-items: center;
}
.popContent .selectNum .right img {
  width: 0.18rem;
}
.popContent .selectNum .right span {
  padding: 0 0.2rem;
  font-size: 0.16rem;
}
.popContent .btn {
  width: 100%;
  height: 0.4rem;
  border-radius: 0.08rem;
  background: #00bf46;
  color: #fff;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
</style>


